<template>
  <div class="channel-outer">
    <ul class="channel">
      <li>
        <a href="javascript:;"
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
            alt="" />保障服务</a
        >
      </li>
      <li>
        <a href="javascript:;"
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"
            alt="" />企业团购</a
        >
      </li>
      <li>
        <a href="javascript:;"
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"
            alt="" />F码通道</a
        >
      </li>
      <li>
        <a href="javascript:;"
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"
            alt="" />米粉卡</a
        >
      </li>
      <li>
        <a href="javascript:;"
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"
            alt="" />以旧换新</a
        >
      </li>
      <li>
        <a href="javascript:;"
          ><img
            src="	https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"
            alt="" />话费充值</a
        >
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.channel-outer {
  width: 234px;
  height: 170px;
  overflow: hidden;
  .channel {
    margin: 0;
    padding: 3px;
    list-style-type: none;
    font-size: 12px;
    text-align: center;
    background: #5f5750;
    height: 170px;
    li {
      position: relative;
      float: left;
      width: 70px;
      height: 82px;
      padding: 0 3px;
      &::after,
      &::before {
        position: absolute;
        content: '';
        background: #665e57;
      }
      &::before {
        top: -1px;
        left: 6px;
        width: 64px;
        height: 1px;
      }
      &::after {
        top: 6px;
        left: 0;
        width: 1px;
        height: 70px;
      }
      a {
        display: block;
        padding-top: 18px;
        text-overflow: ellipsis;
        color: #fff;
        opacity: 0.7;
        transition: opacity 0.2s;
        &:hover {
          opacity: 1;
        }
        img {
          display: block;
          width: 24px;
          height: 24px;
          margin: 0 auto 4px;
        }
      }
    }
  }
}
</style>
